<!DOCTYPE html>
<html>
<head>
    <link href="uikit-3.0.0-rc.16\css\uikit.css" type="text/css" rel="stylesheet">
    <script src="uikit-3.0.0-rc.16\js\uikit.js"></script>
    <script src="uikit-3.0.0-rc.16\js\uikit-icons.js"></script>
</head>
<body>

    <hr class="uk-divider-icon">
    <div class=" uk-grid-small uk-grid-match uk-padding" uk-grid>
        <h1 class="uk-padding uk-width-1-2" uk-tooltip="这货其实是个弱鸡">1170300223 王睿杰</h1>
        
        <div class=" uk-background-cover uk-light uk-flex uk-flex-middle uk-flex-center" data-src="images/test.jpg" uk-img>
            <div uk-lightbox>
                <a class="uk-button uk-button-default " href="images/test.jpg">Open Lightbox</a>
            </div>
        </div>
    </div>
    <hr class="uk-divider-icon">

    <div class=" uk-grid-small uk-grid-match" uk-grid>
        <div class="uk-card uk-card-hover uk-card-body uk-width-1-2 uk-padding">
            <h3 class="uk-card-title">点击上方导航栏最左边的OPENMENU即可打开详细的导航菜单</h3>
            <article class="uk-article">
                <h1 class="uk-article-title">这是一个作业</h1>
                <p class="uk-article-meta">写作业的哈工大计算机科学与技术学院的一名学生</p>
                <p class="uk-article">不过因为几乎没怎么写过html，这个页面有几个bug</p>
                <p class="uk-article">比如，导航栏展开后点击iframe部分无法收回导航栏，必须点击iframe之外的部分</p>
                <p class="uk-text-lead">PS：话说，这门课的内容和名字差别有点大了吧（#滑稽）</p>
            </article>
        </div>

        <div class="uk-card uk-card-hover uk-card-body uk-width-1-2 uk-padding" style="float:right;">
            <p>姓名：王睿杰</p>
            <p>学号：1170300223</p>
            <p>学院：计算机科学与技术学院</p>
            <p>专业：计算机类</p>
            <p>编程水平：菜鸡</p>
            <p>个人爱好：作死</p>
            <p>想不出更多的信息了：placeholder</p>
        </div>
        <div class="uk-card uk-card-hover uk-card-body uk-width-1-1 uk-padding" style="float:right;">
            <p><span uk-icon="uikit"></span>使用Uikt作为样式框架</p>
        </div>
    </div>
    
    
</body>
</html>